<!DOCTYPE html>
<html>
    <head>
        <title>登录</title>
        <meta charset="utf-8"/>
       <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            background-image: url("static/img/登录背景.jpg");
            background-size: cover; 
                   
        }
        #main{
            width: 600px;
            height: 400px;
            padding: 100px;
            margin:0px auto ;
        }
        #top{
            width: 100%;
            height: 90px;
            border: 3px solid rgba(0, 0, 255, 0.201);
            border-radius: 10px;
            background-color: rgba(225, 240, 236, 0.507);
           
        }  
        #top img { 
            width: 100px;
            height: 90px;
            display: block;
            margin: 0 auto;
        }
        #bottom {
            width: 100%;
            height: 310px;
            border-radius: 10px;
            border: 3px solid rgba(0, 0, 255, 0.201);
            background-color: rgba(225, 240, 236, 0.507);
            
        }
        #user{
            width: 80%;
            height: 60px;
            border: 1px solid black;   
            margin: 35px auto 0;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.979);
        
        }
        #user > input{
            width: 80%;
            margin-left: 7px;
            margin-top: 19px;
            font-size: 16px;
            border: none;
            outline:none;
            
        }
        #user-k {
            width: 80%;
            height: 20px;
           /* border: 1px solid black;*/
            margin: 0px auto;   
            font-size: 12px;
            color: red;

        }
        #password{
            width: 80%;
            height: 60px;
            border: 1px solid black;   
            margin: 0px auto;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.979);
        }
        #password > input{
            width: 80%;
            margin-left: 7px;
            margin-top: 19px;
            font-size: 16px;
            border: none;
            outline:none;

        }
        #password-k {
            width: 80%;
            height: 20px;
           /* border: 1px solid black;*/
            margin: 0px auto; 
            font-size: 12px;  
            color:red;

        }
        #run{
            width:80%;
            height: 50px;
            border: 1px solid black;
            margin: 0px auto;
            padding: 0px;
            border-radius: 10px;
            
        }

        #run button{
                width: 100%;
                height: 100%;
                line-height: 40px;
                text-align: center;
                border: none;
                background-color: #25fbf7ea;
                color: #0e0101;
                margin: 0px 0px;
                cursor: pointer;
                border-radius: 10px;
            
            }

        #annotate{
            width:75%;
            height: 25px;
            /*border: 1px solid black;*/
            margin:0px auto;
            font-size: 12px;
            display: flex;
            line-height: 2;
            justify-content: space-between;
        }
        #annotate > span{
        cursor: pointer;
    }
       </style>
       <script type="text/javascript">
        var userName = "Lucy";
        var password = "123456";
        function checkReg(){
            document.getElementById("user-k").innerHTML = "";
            document.getElementById("password-k").innerHTML = "";

            if(document.frm.userName.value == ""){
                document.getElementById("user-k").innerHTML="请输入用户名！";
                document.frm.userName.focus();
                return false;
            }
            else if(document.frm.password.value == ""){
                document.getElementById("password-k").innerHTML="请输入登录密码!";
                document.frm.password.focus();
                return false;
            }
            else if(document.frm.userName.value !=userName){
                document.getElementById("password-k").innerHTML="用户名或密码不正确!";
                return false;
            }
            else if(document.frm.password.value !=password){
                document.getElementById("password-k").innerHTML="用户名或密码不正确!";
                return false;
            }
        }
       </script>
    </head>
     <body>
        <div id="main" >
            <div id="top">
                <div><img src="static\img\图标.png""></div>
            </div>
            <div  id="bottom">
                <form name="frm" method="get" action="http://127.0.0.1:3000/index2.html"onsubmit="return checkReg()">
                <div id="user">
                    <input type="text" name="userName" placeholder="请输入用户名"> 
                </div>
                <div id="user-k"></div>
                <div id="password">
                    <input type="password" name="password" placeholder="请输入登录密码">
                </div>
                <div id="password-k"></div>
                <div id="run">
                    <button>登录</button>
                </div>
                <div id="annotate">
                    <span>注册账户</span>                    
                    <span>忘记密码</span>
                </div>
            </form>
            </div>
        </div> 
     </body>
</html>

